@import "../styles/variables";
@import "../../assets/iconfont/iconfont";

// clear fix
.clear-fix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}


// tab1
.tab-title {
  border-bottom: 1px solid $tab-border-hover-color;
  font-size: $font-size-tab;
  padding: 0;
	position: relative;

  li {
    background-color: $tab-unactive-background-color;
    border-color: $tab-border-color $tab-border-color $tab-border-hover-color;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    bottom: -2px;
    color: #145681;
    cursor: pointer;
    float: left;
    margin-right: 5px;
    overflow: hidden;
    padding: 7px 20px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
		max-width: 150px;
		&:hover{
			background-color: $tab-hover-background-color;
			color: #3a3a3a;
		}

    .tab-close {
			@extend .iconfont;
      @extend .icon-clear;
      position: absolute;
      right: 2px;
      top: 1px;
			display: block;
			font-size: 12px;
			color: $tab-border-color;
      &:hover {
        //color: #a3a3a3;
				//color: red;
      }
    }
  }

  .active {
    background-color: $tab-hover-background-color;
    border-color: $tab-border-hover-color $tab-border-hover-color transparent;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    color: #3a3a3a;
    z-index: 1;
  }
	.btns{
		position: absolute;
		right: 0;
		.btn-back, .btn-forward{
			@extend .iconfont;
			color: #C7C7C7;
			font-size: 20px;
			height: 30px;
			line-height: 30px;
			width: 30px;
			text-align: center;
			display: inline-block;
			cursor: pointer;
			&:hover{
				background-color: #F4F4F4;
			}
			&.disabled{
				color: #EDEDED;
			}
			&:active{
				background-color: #6AD0CE;
			}
			&.btn-back{
			  	@extend .icon-rightarrow;
			  	transform: rotate(180deg);
				margin-right:-2px;
			}
			&.btn-forward{
				@extend .icon-rightarrow;
			}
		}

	}
}


